<template>
	<view :class="['item','item-'+index]">
		<view class="infos">
			<view :class="['avatar',{'avatar-offline':!item.is_online}]">
				<lazy-load-image :image="item.profile" imgMode='aspectFill' :errorImg="config.errorImage.avator" height="100rpx" borderRadius="50" />
			</view>
			<view class="bd">
				<view class="upper">
					<text class="name">{{item.nickname}}</text>
					<text :class="['state',{'state-offline':!item.is_online}]">{{item.is_online?'在线':'离线'}}</text>
					<text :class="['state state-from',{'state-login':item.islogin}]">{{item.islogin?'注册用户':'游客'}}</text>
				</view>
				<view class="lower" v-if="type=='hall'">
					<text>地区：{{item.area}}</text>
				</view>
				<view class="lower" v-if="type=='my'">
					<text>{{item.area}} | {{userFrom}} | {{setState}}</text>
				</view>
			</view>
		</view>
		<view class="docs">
			<template v-for="(item_doc,index_doc) in item.doc" :key="index_doc">
				<view class="item_doc">
					<view class="upper">
						<doc-format class="format" :filetype="item_doc.suffix" />
						<text class="title">{{item_doc.title}}</text>
					</view>
					<view class="lower">
						<text>{{item_doc.readtime}} | 时长：{{item_doc.duration}}</text>
					</view>
				</view>
			</template>
		</view>
		<view class="btns" v-if="item">
			<button class="btn btn-call" type="default" v-if="data.contactStatus==0" @click="call(item)">打招呼</button>
			<button class="btn btn-called" type="default" v-if="data.contactStatus==1">等待响应</button>
			<button class="btn btn-continue" type="default" v-if="data.contactStatus==3" @click="callContinue(item)">继续交流</button>
		</view>
	</view>
	<!-- 打招呼弹窗 -->
	<popup-call ref="popupCallRef" :autoSend="autoSend" :type="type" @changeBtnStatus="changeBtnStatus" />
</template>
<script setup>
	import { ref, reactive, computed, defineComponent, watch } from 'vue';
	import popupCall from './popup-call.vue';
	import config from '@/uni.config.js';
	const emits = defineEmits(['changeStatus']);
	defineComponent({
		popupCall
	})
	const popupCallRef = ref(null);
	const data_props = defineProps({
		index: Number,
		type: {
			type: [String],
			default: 'my'
		},
		item: {
			type: Object
		},
		autoSend: {
			type: [Number, String],
			default: 1
		}
	});
	const userFrom = computed(() => {
		return data_props.item.user_from == 'recommend' ? '客户大厅' : '我的文档';
	});
	const setState = computed(() => {
		switch (data.contactStatus) {
			case 0:
				return '待联系';
			case 1:
				return '等待响应';
			case 2:
				return '不可联系';
			case 3:
				return '消息已送达';
		}
	});
	const data = reactive({
		contactStatus: data_props.item.contact_status
	});
	watch(() => data_props.item.contact_status, (newVal) => {
		data.contactStatus = +newVal;
	}, { immediate: true })
	// 打招呼
	function call(item) {
		if (data_props.autoSend == 1) {
			if (data_props.type == 'my') popupCallRef.value.callMy(item);
			else popupCallRef.value.callHall(item);
		} else {
			popupCallRef.value.open(item);
		}
	}
	// 继续打招呼-到消息列表页面
	function callContinue(item) {
		if (!item.islogin) return uni.showToast({
			icon: 'none',
			mask: true,
			title: `用户不在线，不能对话~`
		})
		const url = `/subpages/chat/chat?conversationID=${item.mid}&nick=${encodeURIComponent(item.nickname)}`;
		uni.navigateTo({
			url
		})
	}
	// 更改按钮状态-打招呼->继续打招呼置灰状态
	function changeBtnStatus(o) {
		data.contactStatus = o && (o.type || o.type == 0) ? o.type : 1;
		emits('changeStatus', o);
	}
	// 异常图片处理
	function imgError(item) {
		item.imgError = true;
	}
</script>
<style lang="scss" scoped>
	@import '@/common/css/base.scss';
	.item {
		margin-top: 28rpx;
		padding: 28rpx;
		border-radius: 16rpx;
		background-color: #fff;
		&-0 {
			margin-top: 0;
		}
	}
	.infos {
		display: flex;
		align-items: center;
		.avatar {
			width: 100rpx;
			height: 100rpx;
			margin-right: 15rpx;
			border-radius: 50%;
			overflow: hidden;
			&-offline {
				opacity: 0.3;
			}
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.upper {
			display: flex;
			align-items: center;
			.name {
				max-width: 360rpx;
				height: 36rpx;
				line-height: 36rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 32rpx;
				color: #222;
			}
			.state {
				display: block;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 18rpx;
				margin-left: 10rpx;
				padding: 0 15rpx;
				background-color: #E6F0FF;
				font-size: 22rpx;
				color: #2878FF;
			}
			.state-offline {
				background-color: #F1F1F1;
				color: #999;
			}
			.state-from {
				background-color: #F1F1F1;
				color: #999;
			}
			.state-login {
				background-color: #E3F4E9;
				color: #23CA62;
			}
		}
		.lower {
			margin-top: 20rpx;
			text {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	.docs {
		margin: 24rpx 0;
		.item_doc {
			padding: 6rpx 0;
		}
		.upper {
			display: flex;
			align-items: flex-start;
			.format {
				margin-right: 12rpx;
			}
			.title {
				max-width: 630rpx;
				height: 34rpx;
				line-height: 34rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
				color: #444;
			}
		}
		.lower {
			padding-left: 46rpx;
			text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}
	.btns {
		.btn {
			width: 260rpx;
			height: 72rpx;
			line-height: 72rpx;
			margin: 0 auto;
			padding: 0;
			text-align: center;
			background: $color;
			border-radius: 36px;
			font-size: 32rpx;
			color: #fff;
			&-called {
				background-color: #eee;
				color: #aaa;
			}
			&-continue {
				background-color: #D3E3FF;
				color: #2878ff;
			}
		}
	}
</style>
